<template>
  <div class="shop_list">
    <ul>
      <li class="list" v-for="(item, index) in shop" :key="index">
        <router-link
          :to="{ path: '/shop/menu', query: { lat, lng, shopId: item.id } }"
        >
          <div class="avatar">
            <!-- <img :src="imageUrl + item.shop_avatar" alt="" /> -->
            <!-- 测试图片 -->
            <img src="@/assets/images/37.jpg" alt="" />
          </div>
          <div class="content">
            <div class="title">{{ item.name }}</div>
            <div class="center">
              <section class="score_sales">
                <score :score="item.score" />
                <span class="sale">月销 {{ item.sale }}</span>
              </section>
              <section class="distance">
                <span>{{ item.delivery_time }}</span
                >&nbsp;
                <span>{{ item.distance }}</span>
              </section>
            </div>
            <div class="price">
              <p>
                <span>¥{{ item.min_order_amount }}起送</span>
                <i></i>
                <span>配送费¥{{ item.delivery_fee }}</span>
              </p>
              <span v-if="item.is_solid == 1" class="delivery">桔子专送</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import Score from '@/components/content/score/Score';

import { mapState, mapMutations } from 'vuex';
import { imageUrl } from '@/config/env';

export default {
  props: {
    shop: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      imageUrl
    };
  },
  components: {
    Score
  },
  computed: {
    ...mapState(['lat', 'lng'])
  },
  methods: {
    ...mapMutations(['SAVE_SHOP_ID'])
  }
};
</script>

<style lang="less" scoped>
.shop_list {
  padding: 0 8px;
}
.list {
  a {
    display: flex;
    margin: 10px 0;
    padding: 10px;
    border-radius: 6px;
    background-color: #fff;
  }
  .avatar {
    margin-right: 10px;
    img {
      width: 60px;
      height: 60px;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
  }

  .title {
    font-weight: bold;
    font-size: 16px;
    color: #000;
  }
  .center {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-min);
    .score_sales {
      display: flex;
    }
  }
  .price {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-min);
    i {
      display: inline-block;
      width: 1px;
      height: 11px;
      margin: -1px 5px;
      background-color: var(--color-text);
    }
  }
  .delivery {
    padding: 1px 2px 0;
    border-radius: 5px;
    color: #000;
    background-color: var(--color-base);
  }
}
</style>
